<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="studentsStoryDialogData.isShow"
    :close-on-click-modal="false"
    width="60%"
  >
    <div class="form-box">
      <el-form
        ref="ruleForm"
        :rules="rules"
        :model="formData"
        label-width="120px"
      >
        <el-form-item label="文章标题:" prop="title">
          <el-input
            v-model.trim="formData.title"
            type="text"
            maxlength="32"
            show-word-limit
            style="width:50%"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章内容:" prop="content">
          <tinyMceEditor
            ref="tinyMceEditor"
            :textMax="5000"
            :editorContent="formData.content"
          ></tinyMceEditor>
        </el-form-item>
        <el-form-item label="设置封面:" prop="imgInfo">
          <uploadSingImg
            :imgUrl="formData.imgInfo"
            accept=".jpg,.jpeg,.png,.gif"
            :maxSize="5"
            @getImgUrl="getCoverImg"
          >
            <template v-slot:imgInfo>( 图片大小不超过5M )</template>
          </uploadSingImg>
        </el-form-item>
        <el-form-item label="设置排列序号:" prop="sort">
          <el-input
            v-model.trim="formData.sort"
            type="text"
            maxlength="9"
            @input="validateSort"
            style="width:50%"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="clearFormData">取 消</el-button>
      <el-button type="success" @click="confirm('ruleForm')">提 交</el-button>
    </span>
  </el-dialog>
</template>
<script>
import uploadSingImg from '@common/uploadSingImg' // 上传单个图片公共组件
import tinyMceEditor from '@common/tinyMceEditor'
import {
  addArticle,
  articleDetail,
  editArticle
} from '@/api/brandManage/aboutUs'

export default {
  props: ['studentsStoryDialogData'],
  data() {
    var validateContent = (rule, value, callback) => {
      !value ? callback(new Error('文章内容不能为空')) : callback()
    }
    return {
      formData: {
        title: '',
        content: '',
        imgInfo: '',
        sort: '',
        modular: '',
        source: ''
      },
      isReadOnly: false,
      nowLength: 0,
      rules: {
        title: [
          { required: true, message: '文章标题不能为空', trigger: 'blur' }
        ],
        content: [{ required: true, validator: validateContent }],
        imgInfo: [{ required: true, message: '请上传封面', trigger: 'change' }],
        sort: [{ required: true, message: '排列序号不能为空', trigger: 'blur' }]
      }
    }
  },
  components: {
    uploadSingImg,
    tinyMceEditor
  },
  mounted() {
    const { id } = this.studentsStoryDialogData
    if (id) {
      articleDetail({ id }, (res) => {
        this.formData = res
      })
    }
  },
  methods: {
    /* 设置封面 */
    getCoverImg(url) {
      this.formData.imgInfo = url
      this.$refs.ruleForm.validateField('imgInfo')
    },
    /* 排序只能输入数字 */
    validateSort(val) {
      this.formData.sort = val.replace(/[^\d]/g, '')
    },
    /* 确认提交 */
    confirm(formName) {
      const content = this.$refs['tinyMceEditor'].tinymceEditorContent()
      if (content === false) return
      this.formData.content = content
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const { id } = this.studentsStoryDialogData
          if (id) {
            editArticle(id, this.formData, (res) => {
              this.$emit('refresh')
              this.clearFormData()
            })
          } else {
            const { modular, source } = this.studentsStoryDialogData
            this.formData.modular = modular
            this.formData.source = source
            addArticle(this.formData, (res) => {
              this.$emit('refresh')
              this.clearFormData()
            })
          }
        }
      })
    },
    /* 关闭时清空 */
    clearFormData() {
      Object.assign(this.$data.formData, this.$options.data().formData)
      this.studentsStoryDialogData.isShow = false
    }
  },
  computed: {
    dialogTitle() {
      var { modular } = this.studentsStoryDialogData
      let title
      switch (modular) {
        case 'MEDIA':
          title = '发布媒体报道'
          break
        case 'ARTICLE':
          title = '发布学员故事'
          break
        case 'ART_ROAD':
          title = '发布艺路鹏游'
          break
        case 'TEACHER_TALK':
          title = '发布名师talk'
          break
        case 'NEW_PRODUCT':
          title = '发布新品发布'
          break
      }
      return title
    }
  }
}
</script>
<style lang="less" scoped></style>
